<template>
  <div class="add-kr">
    <el-drawer size="90%" :visible.sync="drawerVisible" :append-to-body="true" :before-close="closeSelf" direction="btt">
      <span slot="title" style="display: flex; justify-content: space-between;">
        <span>{{krForm.id ? '编辑关键结果/里程碑' : '添加关键结果/里程碑'}}</span>
        <span style="cursor: pointer; font-size: 20px; padding-right: 30px;" v-if="krForm.id && canEditKr">
          <i class="el-icon-delete" v-if="krForm.canUpdateProgress === '1'" @click="delKr" style="border-right: 1px solid #CCC; padding-right: 30px;"></i>
        </span>
      </span>
      <div class="content">
        <div class="form-wrapper">
          <el-form label-width="160px" label-position="left">
            <div style="padding: 0 30px;">
              <el-form-item label="关键结果或里程碑名称">
                <span style="color: red; position: absolute; left: -170px;">*</span>
                <el-input  v-model="krForm.krName" placeholder="请输入关键结果或里程碑名称" :disabled="!canEditKr"></el-input>
              </el-form-item>
              <el-form-item label="数据类型">
                <span style="color: red; position: absolute; left: -170px;">*</span>
                <el-radio-group v-model="krForm.krDataType" size="small">
                  <el-radio-button label="1" :disabled="!canEditKr || !!krForm.id">关键结果</el-radio-button>
                  <el-radio-button label="2" :disabled="!canEditKr || !!krForm.id">里程碑</el-radio-button>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="时间范围" prop="resource">
                <span style="color: red; position: absolute; left: -170px;">*</span>
                <el-col :span="11">
                  <el-date-picker type="date" placeholder="开始执行时间" :disabled="!canEditKr" v-model="krForm.krStartTime" style="width: 100%;"></el-date-picker>
                </el-col>
                <el-col class="line" :span="2" style="text-align: center; line-height: 36px;">-</el-col>
                <el-col :span="11">
                  <el-date-picker type="date" placeholder="结束执行时间" :disabled="!canEditKr" v-model="krForm.krFinishTime" style="width: 100%;"></el-date-picker>
                </el-col>
              </el-form-item>
              <el-form-item label="关键结果或里程碑内容">
                <el-input type="textarea" :rows="4" v-model="krForm.krContent" placeholder="请输入关键结果或里程碑内容" :disabled="!canEditKr"></el-input>
              </el-form-item>
            </div>
          </el-form>
        </div>
        <div class="bottom" style="line-height: 64px; border-top: 1px solid #E6E6E6; padding-left: 130px">
          <el-button type="primary" @click="submitKrForm()" size="mini">保存</el-button>
          <el-button plain @click="closeSelf()" size="mini">取消</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import formUtil from "@/utils/formUtil";
import {dateUtil} from '@/utils/dateUtil'

export default {
  data () {
    return {
      goalInfo: {},
      krForm: {
        krName: '',
        krBelongGoalId: '',
        krBelongGoalName: '',
        krDataType: '1',
        krStartTime: '',
        krFinishTime: '',
        krContent: '',
        krStatus: '1',
        confidenceEntities: []
      },
    };
  },
  props: ["drawerVisible", "userAsd"],
  components: {},
  mounted () {},
  computed: {
    canEditKr() {
      return this.userAsd.userLevel === '1' || ( this.userAsd.userLevel === '2' && this.goalInfo.hasKrAuthority === '1')
    }
  },
  methods: {
    async init(id, goalId, goalName) {
      !id ? this.resetKrForm(goalId, goalName) : this.getKrInfo(id);
    },
    async resetKrForm(goalId, goalName) {
      this.goalInfo = await this.$httpN.postB('lkr/goal/info', {id: goalId})
      formUtil.resetData(this.krForm);
      this.krForm.krBelongGoalId = goalId;
      this.krForm.krBelongGoalName = goalName;
      this.krForm.krDataType = '1';
      this.krForm.krStatus = '1';
      this.krForm.krStartTime = '';
      this.krForm.krFinishTime = '';
    },
    async getKrInfo(id) {
      let krData = await this.$httpN.postB('lkr/kr/krInfo', {id: id})
      this.goalInfo = await this.$httpN.postB('lkr/goal/info', {id: krData.krBelongGoalId})
      this.goalInfo.krList.forEach(kr => {
        if(kr.id === id) this.krForm = kr
      })
    },
    async submitKrForm() {
      if(!this.canEditKr) return this.$message.error('您没有操作权限');
      if(!this.krForm.krName) return this.$message.error('请输入关键结果或里程碑名称');
      if(!this.krForm.krStartTime) return this.$message.error('请输入开始执行时间');
      if(!this.krForm.krFinishTime) return this.$message.error('请输入结束执行时间');
      if(new Date(this.krForm.krStartTime) - new Date(this.krForm.krFinishTime) > 0) return this.$message.error('结束日期不可小于开始日期');
      if (!await this.$httpN.postB(!this.krForm.id ? 'lkr/kr/krSave' : 'lkr/kr/krUpdate', this.krForm) ) return
      formUtil.submitSuccess('保存成功');
      this.closeSelf();
      this.$emit('reload');
    },
    async delKr () {
      formUtil.submitConfirm('您确定要删除吗', async ()=> {
        if(!await this.$httpN.postB('lkr/kr/krDelete',{id: this.krForm.id})) return;
        formUtil.submitSuccess('删除成功');
        this.closeSelf();
        this.$emit('reload');
      })
    },
    closeSelf() {
      this.$emit("closeAddKr");
    },
  }
}
</script>

<style lang='scss' scoped>
.add-kr {
  height: 100%;
}
.content {
  height: 100%;
  background-color: #F7F7F7;
  .form-wrapper {
    width: 650px;
    height: calc(100% - 64px);
    padding-top: 20px;
    margin: 0 40px;
  }
}
</style>